<template>
	<view class="select-box" :style="{'overflow':show?'':'hidden'}">
		<view class="wrap" :style="{width:selectWidth,'overflow':show?'':'hidden'}">
			<view class="select" @click="show=!show"
				:style="{'backgroundImage':backImgType==1?'url(https://xd.xdzcy.top/adminuploads/ee2d73a83591894711bf6e97caba899a.png)':'url(https://xd.xdzcy.top/adminuploads/e20d053523b791056f5ce82714ffeb31.png)'}">
				<view class="select-value">{{selected[optionName]?selected[optionName]:'请选择'}}</view>
				<view class="arrow">
					<u-icon :name="show?'arrow-up':'arrow-down'" color="#000" bold></u-icon>
				</view>
			</view>
			<view class="select-options" :class="{show}"
				:style="{'backgroundImage':backImgType==1?'url(https://xd.xdzcy.top/adminuploads/dae51d3bd2f79c0c1a90ceefa75270e1.png)':'url(https://xd.xdzcy.top/adminuploads/b9d63965b854726eef2355bc3dffdcd5.png)'}">
				<view class="option" v-for="item in options" :key="item.id" :class="{choose:item.value==selected.value}"
					@click="onSelect(item)">
					{{item[optionName]}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 选择名称
			selectName: {
				type: String,
				required: true,
				default: '',
			},
			// 选项组
			options: {
				type: Array,
				required: true,
				default: () => {}
			},
			// 展示选项的名称
			optionName: {
				type: String,
				required: true,
				default: 'name',
			},
			// 展示选项的名称
			label: {
				type: String,
				required: true,
				default: '选项',
			},
			// 选择器宽度
			selectWidth: {
				type: String,
				default: '262px',
			},
			// 选择器背景图片
			backImgType: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				show: false,
				// 选中项
				selected: {}
			}
		},
		methods: {
			onSelect(item) {
				this.selected = item
				this.show = false
				this.$emit('onSelect', {
					name: this.selectName,
					value: item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		color: #3D3D3D;

		.wrap {

			position: relative;


			.select {
				width: 100%;
				height: 64px;
				border-radius: 20px;
				opacity: 1;
				background: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: space-between;

				letter-spacing: 0.04em;
				opacity: 1;
				box-sizing: border-box;
				// border: 2px solid #E0DCF0;/
				z-index: 98;
				background-repeat: no-repeat;
				background-size: cover;

				.select-value {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					white-space: nowrap;
					margin-left: 40px;
					overflow-x: scroll;
					box-sizing: border-box;
				}


				.arrow {
					flex-shrink: 0;
					width: 92rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					// background-color: #f6f6f6;
					border-radius: 20px;
					background-repeat: no-repeat;
					background-size: cover;

				}


			}

			.select-options {
				position: absolute;
				right: 0;
				margin-top: 8rpx;
				width: 100%;
				height: 0;
				border-radius: 20px;
				// border: 1px solid #D1D1D1;
				overflow-y: scroll;
				// background: url(https://xd.xdzcy.top/adminuploads/feb8218ce61d2c59e85ee4148958f5b9.png) no-repeat fixed center;
				// background-color: #efedea;
				transition: all .3s;
				z-index: 99;
				background-repeat: no-repeat;
				background-size: cover;


				.option {
					width: 100%;
					height: 33.33%;
					display: flex;
					align-items: center;
					justify-content: center;
					white-space: nowrap;
					padding: 0 10rpx;
					overflow-x: scroll;
					box-sizing: border-box;
					opacity: .5 !important;
				}

				.choose {
					opacity: 1 !important;
				}
			}

			.show {
				transform: translateY(0);
				height: 174px;
			}
		}






	}
</style>